<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>商城首页</title>
	<%--静态包含 base标签，css样式，jQuery--%>
	<%@ include file="../common/head.jsp" %>
	<script type="text/javascript">

		$(function(){

			//加入购物车操作
			$(".addCartItem").click(function(){
				var bookId = $(this).attr("bookId");
				$.getJSON("cartServlet","action=ajaxAddItem&id="+bookId,function(data){
					$("#cartTotalCount").text("您的购物车中有"+data.totalCount+"件商品");
					$("#cartLastName").text(data.lastName);
				})
				//之前使用同步的方式处理
				//在事件相应的function函数中，有一个this对象，这个this对象，是当前正在响应事件的dom对象
				// location.href = "http://localhost:8080/07_book/cartServlet?action=addItem&id="+bookId;
			});
		});

	</script>


</head>
<body>
	<div id="header">
			<img class="logo_img" alt="" src="static/img/logo.gif" >
			<span class="wel_word">网上商城</span>
			<div>
				<%--如果用户还没有登录，显示【登录和注册的菜单】--%>
				<c:if test="${empty sessionScope.user}">
					<a href="pages/user/login.jsp">登录</a> |
					<a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
				</c:if>
				<%--如果已经登录，则显示登录成功之后的用户信息--%>
				<c:if test="${not empty sessionScope.user}">
					<%@ include file="/pages/common/login_success_menu.jsp"%>
				</c:if>

				<a href="pages/cart/cart.jsp">购物车</a>
				<a href="pages/manager/manager.jsp">后台管理</a>
			</div>
	</div>
	<div id="main">
		<div id="book">
			<div class="book_cond">
				<form action="client/bookServlet" method="get">
					<input type="hidden" name="action" value="pageByPrice"/>
					价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
						<input id="max" type="text" name="max" value="${param.max}"> 元
						<input type="submit" value="查询" />
				</form>
			</div>


			<div style="text-align: center">
				<%--购物车为空的输出--%>
				<c:if test="${empty sessionScope.lastName}">
					<span id="cartTotalCount"></span>
					<div>
						<span id="cartLastName" style="color: red">当前购物车为空</span>
					</div>
				</c:if>
				<%--购物车不为空的输出--%>
				<c:if test="${not empty sessionScope.lastName}">
				<span id="cartTotalCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
				<div>
					您刚刚将<span id="cartLastName" style="color: red">${sessionScope.lastName}</span>加入到了购物车中
				</div>
				</c:if>
			</div>
			<c:forEach items="${requestScope.page.items}" var="book">
			<div class="b_list">
				<div class="img_div">
					<img class="book_img" alt="" src="${book.imgPath}" />
				</div>
				<div class="book_info">
					<div class="book_name">
						<span class="sp1">商品:</span>
						<span class="sp2">${book.name}</span>
					</div>
					<div class="book_author">
						<span class="sp1">卖家:</span>
						<span class="sp2">${book.author}</span>
					</div>
					<div class="book_price">
						<span class="sp1">价格:</span>
						<span class="sp2">${book.price}</span>
					</div>
					<div class="book_sales">
						<span class="sp1">销量:</span>
						<span class="sp2">${book.sales}</span>
					</div>
					<div class="book_amount">
						<span class="sp1">库存:</span>
						<span class="sp2">${book.stock}</span>
					</div>
					<div class="book_add">
						<button class="addCartItem" bookId="${book.id}">加入购物车</button>
					</div>
				</div>
			</div>
			</c:forEach>

		</div>
		<%--静态包含分页条--%>
		<%@include file="/pages/common/page_nav.jsp" %>
	</div>
	
	<div id="bottom">
		<span>
			卓越商城.Copyright &copy;2021
		</span>
	</div>
</body>
</html>